<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<meta name="author" content="xiaojiangK" />
		<meta name="email" content="740092856@qq.com" />
		<meta name="gitee" content="https://gitee.com/xiaojiangk/" />
		<meta name="viewport" content="width=1200, initial-scale=1.0" />
		<link rel="stylesheet" type="text/css" href="images/css/admin.min.css" />
		<link rel="shortcut icon" href="images/logo.png" type="image/x-icon" />
		<title>admin-color</title>
	</head>
	<body>
		<div class="demo-main">
			<div class="admim-title">
				<h2>Color 色彩</h2>
				<p>
					Qxadmin
					为了避免视觉传达差异，使用一套特定的调色板来规定颜色，为你所搭建的产品提供一致的外观视觉感受。
				</p>
			</div>
			<div class="item">
				<div class="title">
					<h3>主色</h3>
					<p>Qxadmin 主要品牌颜色是鲜艳、热情的橙色。</p>
				</div>
				<div class="content">
					<div class="color-box brand">
						<div>
							Brand Color
							<span>#FF7905</span>
						</div>
						<div class="color-sub">
							<div class="color-sub-item" style="background: #fd8822"></div>
							<div class="color-sub-item" style="background: #f99239"></div>
							<div class="color-sub-item" style="background: #f39b50"></div>
							<div class="color-sub-item" style="background: #f3a869"></div>
							<div class="color-sub-item" style="background: #efb382"></div>
							<div class="color-sub-item" style="background: #efc5a3"></div>
							<div class="color-sub-item" style="background: #f1d5bf"></div>
							<div class="color-sub-item" style="background: #f7ebe1"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="item">
				<div class="title">
					<h3>辅助色</h3>
					<p>除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。</p>
				</div>
				<div class="content">
					<div class="color-box success">
						<div>
							Success
							<span>#67C23A</span>
						</div>
						<div class="color-sub">
							<div class="color-sub-item" style="background: #e1f3d8"></div>
							<div class="color-sub-item" style="background: #f0f9eb"></div>
						</div>
					</div>
					<div class="color-box warning">
						<div>
							Warning
							<span>#E6A23C</span>
						</div>
						<div class="color-sub">
							<div class="color-sub-item" style="background: #faecd8"></div>
							<div class="color-sub-item" style="background: #fdf6ec"></div>
						</div>
					</div>
					<div class="color-box danger">
						<div>
							Danger
							<span>#F56C6C</span>
						</div>
						<div class="color-sub">
							<div class="color-sub-item" style="background: #fde2e2"></div>
							<div class="color-sub-item" style="background: #fef0f0"></div>
						</div>
					</div>
					<div class="color-box info">
						<div>
							Info
							<span>#909399</span>
						</div>
						<div class="color-sub">
							<div class="color-sub-item" style="background: #e9e9eb"></div>
							<div class="color-sub-item" style="background: #f4f4f5"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="item">
				<div class="title">
					<h3>中性色</h3>
					<p>中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。</p>
				</div>
				<div class="content">
					<div class="color-group">
						<div class="color-box other" style="background: #ff7905">
							<div>
								主要文字
								<span>#ff7905</span>
							</div>
						</div>
						<div class="color-box other" style="background: #333333">
							<div>
								常规文字
								<span>#333333</span>
							</div>
						</div>
						<div class="color-box other" style="background: #666666">
							<div>
								次要文字
								<span>#666666</span>
							</div>
						</div>
					</div>
					<div class="color-group">
						<div class="color-box other" style="background: #cccccc">
							<div class="color-title">
								一级边框
								<span>#CCCCCC</span>
							</div>
						</div>
						<div class="color-box other" style="background: #eeeeee">
							<div class="color-title">
								二级边框
								<span>#EEEEEE</span>
							</div>
						</div>
						<div class="color-box other" style="background: #ebeef5">
							<div class="color-title">
								三级边框
								<span>#EBEEF5</span>
							</div>
						</div>
					</div>
					<div class="color-group">
						<div class="color-box other" style="background: #000000">
							<div>
								基础黑色
								<span>#000000</span>
							</div>
						</div>
						<div class="color-box other" style="background: #ffffff; border: 1px solid #eee">
							<div class="color-title">
								基础白色
								<span>#FFFFFF</span>
							</div>
						</div>
						<div
							class="color-box other"
							style="
								background: transparent
									url('https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg');
							"
						>
							<div class="color-title">
								透明
								<span>Transparent</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script src="images/js/jquery.min.js"></script>
		<script src="images/js/admin.min.js"></script>
	</body>
</html>
